<template>
  <div>
    <a-form
        :model="formState"
        v-bind="layout"
        name="nest-messages"
        :validate-messages="validateMessages"
    >
      <a-form-item :name="['asset', 'assetName']" label="资产名称" :rules="[{ required: true }]">
        <a-input v-model:value="formState.asset.assetName"/>
      </a-form-item>
      <a-form-item :name="['asset', 'typeId']" label="资产类型" :rules="[{ required: true }]">
        <a-select
            ref="select"
            v-model:value="formState.asset.typeId"
            style="width: 200px"
        >
          <a-select-option v-for="item in typeList" :value="item.typeId">{{ item.typeName }}</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item :name="['asset', 'value']" label="资产价值" :rules="[{ required: true }]">
        <a-input v-model:value="formState.asset.value"/>
      </a-form-item>
      <a-form-item :name="['asset', 'applyReason']" label="申购理由" :rules="[{ required: true }]">
        <a-textarea v-model:value="formState.asset.applyReason" />
      </a-form-item>
      <a-form-item :wrapper-col="{ ...layout.wrapperCol, offset: 8 }">
        <a-button type="primary" html-type="submit" @click="submit">提交申请</a-button>
      </a-form-item>
    </a-form>
  </div>
</template>

<script>
import {onBeforeMount, reactive, ref} from "vue";
import {buyApply, getAssetTypeList} from "@/apis/asset";
import {message} from "ant-design-vue";

export default {
  name: "Assets",
  setup() {
    const layout = {
      labelCol: {
        span: 6,
      },
      wrapperCol: {
        span: 8,
      },
    };
    const validateMessages = {
      required: '${label} is required!',
      types: {
        email: '${label} is not a valid email!',
        number: '${label} is not a valid number!',
      },
      number: {
        range: '${label} must be between ${min} and ${max}',
      },
    };
    const formState = reactive({
      asset: {
        assetName: '',
        typeId: '',
        value: '',
        applyReason: '',
      },
    });
    const typeList = ref([])


    onBeforeMount(()=>{
      getAssetTypeList().then(res=>{
        typeList.value = res.data
      })
    })

    const submit = ()=>{
      buyApply(formState.asset).then(res=>{
        if (res.status === '0') {
          assets.assetName = ''
          assets.typeId = ''
          assets.value = ''
          assets.applyReason = ''
          message.success("操作成功")
        }
      })
    }




    return {
      formState,
      layout,
      validateMessages,
      typeList,
      submit,
    };
  },
}
</script>

<style scoped>

</style>